// hooks/useResponsiveLayout.ts
// 处理form表单是否['layout'] = 'inline'
import { useState, useEffect } from 'react';
import type { FormProps } from 'antd';

type FormLayout = FormProps['layout'];
const useResponsiveLayout = (defaultLayout : FormProps['layout'] = 'inline') => {
  const [layout, setLayout] = useState(defaultLayout);

  useEffect(() => {
    const handleResize = () => {
      setLayout(window.innerWidth < 768 ? 'vertical' : defaultLayout);
    };

    handleResize(); // 初始化
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [defaultLayout]);

  return layout;
};

export default useResponsiveLayout;